<template>
  <a-layout style="overflow-x: hidden">
    <a-layout-header style="background: #fff; padding-inline: 0" class="flex">
      <div class="hL">
        <img
          src="../../assets/newimg/logo.png"
          style="width: 100%; height: 100%"
        />
      </div>
      <div class="hR w-full">
        <div class="w-full h-full flex justify-between items-center">
          <div class="flex items-center">
            <div
              @click="jump('/')"
              style="border-top: 4px solid #fff"
              class="flex cursor-pointer items-center gap-[5px] h-full text-center justify-center px-[20px]"
            >
              <el-icon>
                <img src="../../assets/img/home.png" class="i_icon" />
              </el-icon>
              <span style="color: #000 !important">首页</span>
            </div>

            <div
              @click="jump('/search')"
              style="border-top: 4px solid #fff"
              class="flex cursor-pointer items-center gap-[5px] h-full text-center justify-center px-[20px]"
            >
              <el-icon>
                <img src="../../assets/img/路径 33@2x.png" class="i_icon" />
              </el-icon>
              <span style="color: #000 !important">搜索</span>
            </div>

            <div
              style="border-top: 4px solid #f43107"
              class="flex items-center gap-[5px] h-full text-center justify-center bg-[#FCE2E0] px-[20px]"
            >
              <img
                src="../../assets/newimg/icon/组 5960@2x.png"
                style="width: 0.875rem; height: 0.875rem"
              />
              <span style="color: #000 !important">工作台</span>
            </div>
          </div>
          <a-dropdown>
            <div class="flex pr-[20px] items-center gap-[10px]">
              <img
                src="../../assets/img/work/avatar.png"
                style="border-radius: 50%"
                height="36"
                width="36"
              />
              <span>{{ user.account }}</span>
              <img src="../../assets/img/work/down.png" height="8" width="12" />
            </div>
            <template #overlay>
              <a-menu>
                <a-menu-item key="0">
                  <a target="_blank" @click="userPasswordd">
                    个人中心
                  </a></a-menu-item
                >
                <a-menu-item key="1">
                  <a target="_blank" @click="exit"> 退出登录 </a>
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </div>

        <!-- <el-menu
          mode="horizontal"
          @select="handleSelect"
          :ellipsis="false"
          style="height: 70px; margin-left: 10px"
          router
        >
          <el-menu-item index="/">
            <el-icon>
              <img src="../../assets/img/home.png" class="i_icon" />
            </el-icon>
            <span style="color: #000 !important">首页</span>
          </el-menu-item>

          <el-menu-item index="/search">
            <el-icon>
              <img src="../../assets/img/路径 33@2x.png" class="i_icon" />
            </el-icon>
            <span style="color: #000 !important">搜索</span>
          </el-menu-item>
          <el-menu-item index="/head">
            <el-icon>
              <img src="../../assets/img/路径 4087@2x.png" class="i_icon" />
            </el-icon>
            <span style="color: #000 !important">工作台</span>
          </el-menu-item>
        </el-menu> -->
      </div>
    </a-layout-header>
    <a-layout>
      <a-layout-sider
        :trigger="null"
        class="menu"
        theme="light"
        v-model:collapsed="collapsed"
        collapsible
      >
        <a-menu
          mode="vertical"
          theme="light"
          :inline-collapsed="collapsed"
          :selectedKeys="[route.path]"
          @select="changeMenu"
        >
          <a-menu-item key="/header" title="首页">
            <template #icon>
              <img
                :src="route.path == '/header' ? oned : one"
                style="width: 0.875rem; height: 0.875rem"
              />
            </template>
            <span>首页</span>
          </a-menu-item>

          <a-menu-item key="/doctor" title="医械通">
            <template #icon>
              <img
                :src="route.path == '/doctor' ? twod : two"
                style="width: 0.875rem; height: 0.875rem"
              />
            </template>
            <span>医械通</span>
          </a-menu-item>
          <a-menu-item key="/business" title="商机">
            <template #icon>
              <img
                :src="route.path == '/business' ? threed : three"
                style="width: 0.875rem; height: 0.875rem"
              />
            </template>
            <span>商机</span>
          </a-menu-item>
          <!-- <a-menu-item key="/analysis" title="分析">
            <template #icon>
              <img
                src="../../assets/newimg/icon/组 5961@2x.png"
                style="width: 0.875rem; height: 0.875rem"
              />
            </template>
            <span>分析</span>
          </a-menu-item> -->
          <a-menu-item key="/data" title="数据">
            <template #icon>
              <img
                src="../../assets/newimg/icon/路径 4588@2x.png"
                style="width: 0.875rem; height: 0.875rem"
              />
            </template>
            <span>数据</span>
          </a-menu-item>
          <a-menu-item key="/give" title="服务">
            <template #icon>
              <img
                :src="route.path == '/give' ? fourd : four"
                style="width: 0.875rem; height: 0.875rem"
              />
            </template>
            <span>服务</span>
          </a-menu-item>
          <a-menu-item key="/means" title="资产">
            <template #icon>
              <img
                :src="route.path == '/means' ? fived : five"
                style="width: 0.875rem; height: 0.875rem"
              />
            </template>
            <span>资产</span>
          </a-menu-item>
          <a-menu-item key="/setup" title="设置" class="mt-[20px]">
            <template #icon>
              <img
                :src="route.path == '/setup' ? sixd : six"
                style="width: 0.875rem; height: 0.875rem"
              />
            </template>
            <span>设置</span>
          </a-menu-item>
        </a-menu>
      </a-layout-sider>
      <a-layout-content>
        <a-config-provider
          :locale="zhCN"
          :theme="{
            token: {
              colorPrimary: '#F43107',
            },
          }"
        >
          <router-view></router-view>
        </a-config-provider>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script lang="ts" setup>
import zhCN from "ant-design-vue/es/locale/zh_CN";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import { getCurrentInstance, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useCurrentMenuStore, useUserStore } from "../../stores/menuStore";
import one from "@/assets/newimg/icon/组 5960@2x.png";
import two from "@/assets/newimg/icon/路径 4585@2x.png";
import three from "@/assets/newimg/icon/路径 4586@2x.png";
import four from "@/assets/newimg/icon/组 5961@2x.png";
import five from "@/assets/newimg/icon/路径 4589@2x.png";
import six from "@/assets/newimg/icon/路径 4590@2x.png";

import oned from "@/assets/img/work/1.png";
import twod from "@/assets/img/work/2.png";
import threed from "@/assets/img/work/3.png";
import fourd from "@/assets/img/work/4.png";
import fived from "@/assets/img/work/5.png";
import sixd from "@/assets/img/work/6.png";

dayjs.locale("zh-cn");
const store = useCurrentMenuStore();
const userStore = useUserStore();
const $bus = getCurrentInstance().proxy.$bus;

const collapsed = ref(false);

const user = computed(() => {
  return userStore.user;
});

const router = useRouter();
const route = useRoute();
const changeMenu = (item) => {
  router.push(item.key);
  store.changeCurrentTitle(item.item.title, "1");

  console.log("item,", item, store.currentTitle, store.currentKey);
};

onMounted(() => {
  userStore.setUser();

  console.log("user", userStore.user);

  $bus.on("collapsed", (val) => {
    collapsed.value = !collapsed.value;
  });
});

const jump = (path) => {
  router.push(path);
};

//个人中心
const userPasswordd = () => {
  jump("/stagingInfo");
};

// 退出
const exit = () => {
  localStorage.removeItem("token");
  jump("/");
};
</script>

<style lang="scss" scoped>
:deep(.ant-menu-item-selected) {
  background: url(@/assets/img/work/menu-selected-bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
}
:deep(.ant-menu-item) {
  margin-block: 20px !important;
}

.menu {
  width: 150px !important;
  min-width: 150px !important;
  max-width: 150px !important;
}

.hL {
  background-color: #fff;
  width: 9.375rem;
  height: 4.375rem;
}

.el-aside {
  background-color: #1c294c;
  color: #333;
  height: calc(100vh - 4.375rem);
}

.el-main {
  // background-color: #ecf5ff;
  color: #333;
  height: calc(100vh - 4rem);
  padding: 0;
  margin: 0;
}
</style>
